<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css">
    <link href="https://cdn.bootcss.com/semantic-ui/2.3.1/semantic.css" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="https://cdn.bootcss.com/semantic-ui/2.3.1/semantic.js"></script>
</head>

<script>
    $(function () {


        function GetRequest() {
            var url = location.search; //获取url中"?"符后的字串
            var theRequest = new Object();
            if (url.indexOf("?") != -1) {
                var str = url.substr(1);
                strs = str.split("&");
                for (var i = 0; i < strs.length; i++) {
                    theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
                }
            }
            return theRequest;
        }

        var request = new Object();
        request = GetRequest();
        var tagName = request['tagName'];
        search(tagName,null);

        var b = "";
        $.get("/wenote/tag?method=findAllTag", {}, function (data) {
            for (var i = 0; i < data.data.length; i++) {
                b += '<a style="margin-left: 31px;" id="tagName" href="#" target="_self" class="ui teal basic left pointing label m-margin-tb-tiny" data-value="' + data.data[i].tagName + '">' + data.data[i].tagName + '<div class="detail">' + data.data[i].cnt + '</div></a>';
            }
            $("#tagList").html(b);
        });

        $('body').on('click', '#tagName', function () {
            var tagName = $(this).data("value");
            search(tagName, null);
        });

    });

    var c = "";
    $.get("/wenote/tag?method=findTagCount", {}, function (data) {
        c += '共 <h2 class="ui orange header m-inline-block m-text-thin">' + data.data + '</h2> 类';
        $("#tagCount").html(c);
    });

    function search(tagName, currentPage) {
        var n = "";
        $.get("/wenote/tag?method=findNoteByTag", {
            tagName: tagName,
            currentPage: currentPage
        }, function (data) {
            var firstPage = '<a style="margin-left: 7px;" href="javascript:search(\'' + tagName + '\',1);" class="ui mini teal basic button">首页</a>';

            //计算上一页的页码
            var beforeNum = data.currentPage - 1;
            if (beforeNum <= 0) {
                beforeNum = 1;
            }

            var beforePage = '<a href="javascript:search(\'' + tagName + '\',' + beforeNum + ');" class="ui mini teal basic button">上一页</a>';

            n += firstPage;
            n += beforePage;

            /*
                1.一共展示10个页码，能够达到前5后4的效果
                2.如果前边不够5个，后边补齐10个
                3.如果后边不足4个，前边补齐10个
            */

            // 定义开始位置begin,结束位置 end
            var begin;
            var end;

            if (data.totalPage < 10) {
                begin = 1;
                end = data.totalPage;
            } else {
                begin = data.currentPage - 5;
                end = data.currentPage + 4;

                if (begin < 1) {
                    begin = 1;
                    end = begin + 9;
                }

                if (end > data.totalPage) {
                    end = data.totalPage;
                    begin = end - 9;
                }
            }

            for (var i = begin; i <= end; i++) {
                var l;
                //判断当前页码是否等于i
                if (data.currentPage == i) {
                    l = '<a href="javascript:search(\'' + tagName + '\',' + i + ');" class="ui mini blue button">' + i + '</a>';
                } else {
                    //创建页码的li
                    l = '<a href="javascript:search(\'' + tagName + '\',' + i + ');" class="ui mini teal basic button">' + i + '</a>';
                }
                n += l;
            }

            var lastPage = '<a href="javascript:search(\'' + tagName + '\',' + data.totalPage + ');" class="ui mini teal basic button">尾页</a>';

            var nextNumber = currentPage + 1;
            if (nextNumber >= data.totalPage) {
                nextNumber = data.totalPage;
            }

            var nextPage = '<a href="javascript:search(\'' + tagName + '\',' + nextNumber + ');" class="ui mini teal basic button">下一页</a>';

            n += nextPage;
            n += lastPage;
            n += '<div style="float: right;" class="right aligned column"><a style="float: right;" href="index.html" class="ui mini teal basic button">返回</a>共<font id="totalCount" class="ui orange header m-inline-block m-text-thin" color="red">' + data.totalCount + '</font>篇<font id="totalPage" class="ui orange header m-inline-block m-text-thin" color="red">' + data.totalPage + '</font>页</div>';

            //c+='<div  class="ui padded vertical segment m-padded-tb-large"><div  class="ui middle aligned mobile reversed stackable grid"><div class="eleven wide column"><h3 class="ui header"><a style="color: #0f0f0f;" href="noteComment.html" target="_self" class="m-black">'+data.data[i].noteTitle+'</a></h3><p class="m-text">'+data.data[i].noteContent+'</p><div class="ui grid"><div class="eleven wide column"><div class="ui mini horizontal link list"><div class="item"><img src="'+data.data[i].image+'" alt="" class="ui avatar image"><div class="content"><a href="#" class="header">'+data.data[i].author+'</a></div></div><div class="item"><i class="calendar icon"></i><span>'+data.data[i].createTime+'</span></div><div class="item"><i class="eye icon"></i> <span>'+data.data[i].visit+'</span></div></div></div><div class="right aligned five wide column"><a href="#" target="_self" class="ui teal basic label m-padded-tiny m-text-thin">'+data.data[i].categoryName+'</a></div></div></div><div class="five wide column"><a href="noteComment.html" target="_self"><img src="'+data.data[i].image+'" alt="" class="ui rounded image"></a></div></div></div>';
            $("#notePageList").html(n);

            var notelis = "";
            var img = '';
            for (var i = 0; i < data.list.length; i++) {
                notelis += '<h3 class="ui header"><a style="color: #0f0f0f;" href="noteComment.html?noteID=' + data.list[i].noteID + '" target="_self" class="m-black">' + data.list[i].noteTitle + '</a>\n' +
                    '                        </h3>\n' +
                    '                        <p class="m-text">' + data.list[i].noteContent + '</p>\n' +
                    '                        <div class="ui grid">\n' +
                    '                            <div class="eleven wide column m-padding-r-zero">\n' +
                    '                                <div class="ui small horizontal link list"> <!-- horizontal代表横着放置 -->\n' +
                    '                                    <div class="item">\n' +
                    '                                        <img src="https://tse4-mm.cn.bing.net/th/id/OIP.Ie53C-X76KBg5Yr5rf6JbgHaDe?w=318&h=164&c=7&o=5&pid=1.7"\n' +
                    '                                             alt="Yonmin" class="ui avatar image">\n' +
                    '                                        <div class="content"><a href="#">' + data.list[i].author + '</a></div>\n' +
                    '                                    </div>\n' +
                    '                                    <div class="item">\n' +
                    '                                        <i class="calendar icon m-icon"></i><span>' + data.list[i].createTime + '</span>\n' +
                    '                                    </div>\n' +
                    '                                    <div class="item">\n' +
                    '                                        <i class="eye icon m-icon"></i><span>' + data.list[i].visit + '</span>\n' +
                    '                                    </div>\n' +
                    '                                </div>\n' +
                    '                            </div>\n' +
                    '                            <div class="five wide column center aligned middle aligned">\n' +
                    '                                <a href="#" class="ui teal basic label m-padding-mini m-text-thin">' + data.list[i].categoryName + '</a>\n' +
                    '                            </div>\n' +
                    '                        </div>';
                img += '<a href="#" target="_blank">\n' +
                    '                            <div class="m-image-box">\n' +
                    '                                <img src="https://tse4-mm.cn.bing.net/th/id/OIP.Ie53C-X76KBg5Yr5rf6JbgHaDe?w=318&h=164&c=7&o=5&pid=1.7"\n' +
                    '                                     alt="" class="ui centered rounded image m-image">\n' +
                    '                            </div>\n' +
                    '                        </a>';

            }
            $("#noteList").html(notelis);
            $("#imgList").html(img);
            //定位到页面顶部
            window.scrollTo(0, 0);
        });
    }
</script>

<body>

<!-- 导航 -->
<div></div>

<!-- 中间内容 -->
<div class="m-padding-tb-massive">
    <div class="ui container m-container">
        <!-- header -->
        <div class="ui top attached segment m-fontsize-larger">
            <div class="ui middle aligned two column grid">
                <div class="column m-padding-tb">
                    <h3 class="ui teal header">分类</h3>
                </div>
                <div id="tagCount" class="right aligned column">
                    共 <h2 class="ui orange header m-inline-block m-text-thin">14</h2> 类
                </div>
            </div>
        </div>
        <!-- list -->
        <div class="ui segment attached">
            <div id="tagList" class="ui teal segment">
                <a href="#" target="_blank" class="ui teal basic left pointing label m-margin-tb-tiny">
                    方法论
                    <div class="detail">23</div>
                </a>
                <a href="#" target="_blank" class="ui teal basic left pointing label m-margin-tb-tiny">
                    方法论
                    <div class="detail">23</div>
                </a>
                <!--*/-->
            </div>
        </div>
        <!-- contents -->
        <div class="ui top attached teal segment">
            <!-- content -->
            <div class="ui padded vertical segment m-padding-tb-large">
                <div class="ui mobile reversed stackable grid">
                    <div id="noteList" class="eleven wide column">
                        <!--                        <h3 class="ui header"><a href="#" target="_blank" class="m-black">SpringBoot搭建博客系统</a></h3>-->
                        <!--                        <p class="m-text">SpringBoot搭建博客系统SpringBoot搭建博客系统SpringBoot搭建博客系统SpringBoot搭建博客系统SpringBoot搭建博客系统</p>-->
                        <!--                        <div class="ui grid">-->
                        <!--                            <div class="row">-->
                        <!--                                <div class="eleven wide column m-padding-r-zero">-->
                        <!--                                    <div class="ui small horizontal link list"> &lt;!&ndash; horizontal代表横着放置 &ndash;&gt;-->
                        <!--                                        <div class="item">-->
                        <!--                                            <img src="https://tse4-mm.cn.bing.net/th/id/OIP.Ie53C-X76KBg5Yr5rf6JbgHaDe?w=318&h=164&c=7&o=5&pid=1.7"-->
                        <!--                                                  alt="Yonmin" class="ui avatar image">-->
                        <!--                                            <div class="content"><a href="#">YonminMa</a></div>-->
                        <!--                                        </div>-->
                        <!--                                        <div class="item">-->
                        <!--                                            <i class="calendar icon m-icon"></i><span>2020-7-28</span>-->
                        <!--                                        </div>-->
                        <!--                                        <div class="item">-->
                        <!--                                            <i class="eye icon m-icon"></i><span>218</span>-->
                        <!--                                        </div>-->
                        <!--                                    </div>-->
                        <!--                                </div>-->
                        <!--                                <div class="five wide column center aligned middle aligned">-->
                        <!--                                    <a href="#" class="ui teal basic label m-padding-mini m-text-thin">认知升级</a>-->
                        <!--                                </div>-->
                        <!--                            </div>-->
                        <!--                            <div class="row">-->
                        <!--                                <div class="column">-->
                        <!--                                    <a href="#" class="ui basic left pointing label m-padding-tb-small m-text-thin">标签</a>-->
                        <!--                                </div>-->
                        <!--                            </div>-->
                        <!--                        </div>-->
                    </div>

                                        <div id="imgList" class="five wide column">
<!--                                            <a href="#" target="_blank">-->
<!--                                                <div class="m-image-box">-->
<!--                                                    <img src="https://tse4-mm.cn.bing.net/th/id/OIP.Ie53C-X76KBg5Yr5rf6JbgHaDe?w=318&h=164&c=7&o=5&pid=1.7" alt="" class="ui centered rounded image m-image">-->
<!--                                                </div>-->
<!--                                            </a>-->
                                        </div>
                </div>
            </div>
        </div>

        <!-- footer -->
        <div class="ui segment attached">
            <div class="ui middle aligned two column grid">
                <div id="notePageList" style="width: 100%;" class="column">
                    <!--                    <a style="margin-left: 7px;" href="#" class="ui mini teal basic button">首页</a>-->
                    <!--                    <a href="#" class="ui mini teal basic button">上一页</a>-->
                    <!--                    <a href="#" class="ui mini teal basic button">1</a>-->
                    <!--                    <a href="#" class="ui mini teal basic button">下一页</a>-->
                    <!--                    <a href="#" class="ui mini teal basic button">尾页</a>-->
                    <!--                    <div style="float: right;margin-top:0px;" class="right aligned column">-->
                    <!--                        共<font id="totalCount" class="ui orange header m-inline-block m-text-thin"-->
                    <!--                               color="red">x</font>篇-->
                    <!--                        <font id="totalPage" class="ui orange header m-inline-block m-text-thin"-->
                    <!--                              color="red">6</font>页-->
                    <!--                    </div>-->
                </div>
                <!--                <a style="display: inline;float: right;" href="index.html" class="ui mini teal basic button">返回</a>-->
            </div>
        </div>
    </div>
</div>

<!-- 底部footer -->
<div></div>
<script>
    $('.show').click(function () {
        $('.m-item').toggleClass('m-mobile-hide')
    });
    $(document).ready(function () {
        let contentHeight = document.body.offsetHeight,
            winHeight = document.body.scrollHeight;
        if (!((contentHeight) < winHeight)) {
            $("#footer").addClass("fixed-bottom");
        }
    });
    $('.newblog-container').load(/*[[@{/footer/newblogs}]]*/"/footer/newblogs")
</script>
</body>
</html>